<template>
  <view class="app-container">
    <view class="search-bar p-20">
      <u-search
        placeholder="搜索订单号或商户名称"
        v-model="params.search"
        @search="handleSearch"
        @clear="handleClear"
      ></u-search>
      <u-tabs
        :list="statusOptions"
        :current="currentStatusIndex"
        @change="handleStatusChange"
        lineColor="#2979ff"
        :activeStyle="{ color: '#2979ff' }"
        :inactiveStyle="{ color: '#606266' }"
      ></u-tabs>
    </view>
    <view class="flex-1" style="height: 0">
      <scroll-view scroll-y style="height: 100%" @scrolltolower="loadMore">
        <view class="p-20">
          <view
            class="order-card"
            v-for="item in orderList"
            :key="item.id"
            @click="handleToDetail(item)"
          >
            <view class="card-header">
              <text class="order-no">订单号: {{ item.code }}</text>
              <text class="order-status" :class="getStatusClass(item.status)">{{
                getStatusText(item.status)
              }}</text>
            </view>
            <view class="card-body">
              <view class="info-row">
                <text class="label">商户:</text>
                <text class="value">{{ item.merchant.name }}</text>
              </view>
              <view class="info-row">
                <text class="label">金额:</text>
                <text class="value">¥{{ item.total_price }}</text>
              </view>
              <view class="info-row">
                <text class="label">创建时间:</text>
                <text class="value">{{ item.created_at }}</text>
              </view>
              <view class="image-list" v-if="item.lines && item.lines.length">
                <u-album
                  :urls="item.lines.map((line) => line.product.image_url)"
                ></u-album>
              </view>
            </view>
          </view>
          <u-gap height="10"></u-gap>
          <u-loadmore
            :status="params.page >= totalPage ? 'nomore' : 'loading'"
            :loadText="{
              nomore: '没有更多了',
              loading: '正在加载中...',
            }"
            v-if="orderList.length > 0"
          />
          <u-gap height="10"></u-gap>
          <view class="empty" v-if="orderList.length <= 0">
            <text>暂无订单</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { supplierOrderList } from "@/common/apis/supplier.js";
import { onShow } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";

const params = reactive({
  page: 1,
  size: 8,
  search: "",
  status: "",
});

const statusOptions = [
  { name: "全部", value: "" },
  { name: "待支付", value: "pending" },
  { name: "已支付", value: "paid" },
  { name: "已发货", value: "express" },
  { name: "已完成", value: "completed" },
  { name: "已取消", value: "canceled" },
];

const currentStatusIndex = ref(0);

const handleSearch = () => {
  params.page = 1;
  getOrderList();
};

const handleClear = () => {
  params.search = "";
  params.page = 1;
  getOrderList();
};

const handleStatusChange = ({ index }) => {
  currentStatusIndex.value = index;
  params.status = statusOptions[index].value;
  params.page = 1;
  getOrderList();
};

const orderList = ref([]);
const totalPage = ref(0);

const getOrderList = async () => {
  const res = await supplierOrderList(params);
  if (res) {
    orderList.value =
      params.page === 1 ? res.records : [...orderList.value, ...res.records];
    totalPage.value = res.total_page;
  }
};

const loadMore = () => {
  console.log("d");
  if (params.page < totalPage.value) {
    params.page++;
    getOrderList();
  }
};

const getStatusText = (status) => {
  const statusMap = {
    canceled: "已取消",
    pending: "待支付",
    paid: "已支付",
    express: "已发货",
    completed: "已完成",
  };
  return statusMap[status] || status;
};

const getStatusClass = (status) => {
  return {
    "status-canceled": status === "canceled",
    "status-pending": status === "pending",
    "status-paid": status === "paid",
    "status-shipped": status === "shipped",
    "status-completed": status === "completed",
  };
};

function handleToDetail(item) {
  uni.navigateTo({
    url: `/pages/supplier/order-detail?id=${item.id}`,
  });
}

onShow(() => {
  params.page = 1;
  getOrderList();
});
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
}

.search-bar {
  background: #fff;
  border-bottom: 1rpx solid #f5f5f5;
}

.order-card {
  background: #fff;
  border-radius: 8px;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.order-no {
  font-size: 24rpx;
  color: #666;
}

.order-status {
  font-size: 24rpx;
  &.status-canceled {
    color: #999;
  }
  &.status-pending {
    color: #f0ad4e;
  }
  &.status-paid {
    color: #5cb85c;
  }
  &.status-shipped {
    color: #5bc0de;
  }
  &.status-completed {
    color: #337ab7;
  }
}

.card-body {
  padding-top: 10rpx;
}

.image-list {
  margin-top: 20rpx;
  padding-top: 10rpx;
  border-top: 1rpx dashed #f5f5f5;
}

.info-row {
  display: flex;
  margin-bottom: 10rpx;
  font-size: 28rpx;
}

.label {
  color: #999;
  margin-right: 20rpx;
}

.value {
  color: #333;
}

.empty {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>
